<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./elementui/index.js"></script>
    <!--    <script src="./node_modules/downloadjs/download.min.js"></script>-->
    <style>
        input[aria-hidden="true"] {
            display: none !important;
        }

        .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
            box-shadow: none !important;
        }
    </style>

</head>
<body>
<div id="example-1">
    <div class="branch-steps">
        <!-- 主流程步骤 -->
        <el-steps :active="activeStep" finish-status="success">
            <el-step v-for="(step, index) in mainSteps" :key="index" :title="step.title"></el-step>
        </el-steps>

        <!-- 分支步骤 -->
        <div v-if="showBranch" class="branch-container">
            <div class="branch-line"></div>
            <el-steps direction="vertical" :active="branchActive" finish-status="success">
                <el-step v-for="(step, index) in branchSteps" :key="index" :title="step.title"></el-step>
            </el-steps>
        </div>
    </div>
</div>

<script type="module">
    const InfoCheckStatusSelects = [
        {
            code: 10,
            name: "待审核",
        },
        {
            code: 20,
            name: "审核通过",
        },
        {
            code: 30,
            name: "退回",
        }
    ]

    var example1 = new Vue({
        el: '#example-1',
        data() {
            return {
                activeStep: 1, // 主流程当前步骤
                branchActive: 0, // 分支流程当前步骤
                showBranch: true, // 是否显示分支
                mainSteps: [
                    { title: '步骤1' },
                    { title: '步骤2' },
                    { title: '步骤3' },
                    { title: '完成' }
                ],
                branchSteps: [
                    { title: '分支步骤1' },
                    { title: '分支步骤2' },
                    { title: '分支完成' }
                ]
            }
        },
        methods: {
            // 进入分支
            enterBranch() {
                this.showBranch = true;
            },
            // 返回主流程
            backToMain() {
                this.showBranch = false;
                this.branchActive = 0;
                this.activeStep++;
            }
        }
    })
</script>
</body>
</html>
